<template>
  <div class="goods">
    <div class="query">
      <div class="w" style="margin-bottom: 0">
        <el-form ref="queryForm" :model="queryParams" :inline="true">
          <el-form-item label="商品名称">
            <el-input v-model="queryParams.spuName" size="small" style="width: 200px" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="品牌">
            <el-select v-model="queryParams.brandIdList" size="small" style="width: 200px" filterable multiple collapse-tags clearable>
              <el-option v-for="option in options.brandOptions" :key="option.id" :label="option.brandName" :value="option.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="queryParams.model" size="small" style="width: 200px" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="零售价区间" prop="userName">
            <el-input v-model="queryParams.priceBegin" type="number" size="small" style="width: 100px;line-height: 20px;" clearable @keyup.enter.native="handleQuery" />
            <span style="margin: 0 5px"> - </span>
            <el-input v-model="queryParams.priceEnd" type="number" size="small" style="width: 100px;line-height: 20px;" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <div>
              <mall-button text="查询" class-style="main-btn" style="margin-left: 10px;" @btnClick="handleQuery" />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-loading="loading" element-loading-text="加载中..." style="margin-top: 10px; min-height: 35vw;">
      <div v-if="!noResult" class="img-item">
        <!--商品-->
        <div class="goods-box w">
          <mall-goods v-for="(item,i) in page.records" :key="i" :goods="item" />
        </div>
        <!-- 分页 -->
        <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />
      </div>
      <div v-if="noResult" class="no-info">
        <div class="no-data">
          <img src="/images/no-search.png">
          <br> 抱歉！暂时还没有商品
        </div>
      </div>
      <div v-if="error" class="no-info">
        <div class="no-data">
          <img src="/images/error.png">
          <br> 抱歉！出错了...
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MallGoods from '@/components/MallGoods'
import MallButton from '@/components/MallButton'
import GoodsApi from '@/api/goods/GoodsApi.js'
import BrandApi from '@/api/goods/BrandApi.js'

export default {
  components: {
    MallGoods,
    MallButton
  },
  data() {
    return {
      options: {
        brandOptions: []
      },
      queryParams: {
        priceBegin: null,
        priceEnd: null,
        category1Id: null,
        spuName: null,
        brandIdList: [],
        model: null
      },
      page: {
        current: 1,
        pageSize: 20,
        total: 0,
        records: []
      },
      goods: [],
      noResult: false,
      error: false,
      loading: true,
      sortType: 1,
      windowHeight: null,
      windowWidth: null
    }
  },
  watch: {
    $route(to, from) {
      if (to.fullPath.indexOf('/goodsList?categoryId=') >= 0) {
        this.queryParams.category1Id = to.query.categoryId
      } else {
        this.queryParams.category1Id = null
      }
      this.handleQuery()
    }
  },
  created() {
  },
  mounted() {
    this.windowHeight = window.innerHeight
    this.windowWidth = window.innerWidth
    this.loadOptions()
    this.handleQuery()
  },
  methods: {
    loadOptions() {
      BrandApi.list().then(response => {
        this.options.brandOptions = response.data
      })
    },
    handleQuery() {
      this.loading = true
      if (this.queryParams.priceGt !== '') {
        this.queryParams.priceGt = Math.floor(this.queryParams.priceGt)
      }
      if (this.queryParams.priceLte !== '') {
        this.queryParams.priceLte = Math.floor(this.queryParams.priceLte)
      }
      GoodsApi.list(this.queryParams, this.page).then(
        res => {
          this.page.records = res.data.records
          this.page.total = res.data.total
          this.noResult = false
          if (this.page.total === 0) {
            this.noResult = true
          }
          this.loading = false
        },
        res => {
          this.loading = false
          this.error = true
        }
      )
    },
    // 默认排序
    reset() {
      this.sortType = 1
      this.sort = ''
      this.handleQuery()
    },
    // 价格排序
    sortByPrice(v) {
      v === 1 ? this.sortType = 2 : this.sortType = 3
      this.sort = v
      this.handleQuery()
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "src/styles/mixin";
@import "src/styles/theme";

.query {
  height: 60px;
  line-height: 20px;

  > div {
    display: flex;
    align-items: center;

    a {
      padding: 0 15px;
      height: 100%;
      @extend %block-center;
      font-size: 12px;
      color: #999;

      &.active {
        color: #5683EA;
      }

      &:hover {
        color: #5683EA;
      }
    }

    input {
      @include wh(80px, 30px);
      border: 1px solid #ccc;
    }

    input + input {
      margin-left: 10px;
    }
  }

  .price-interval {
    padding: 0 15px;
    @extend %block-center;

    input[type=number] {
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      border-radius: 5px;
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }
}

.goods-box {
  > div {
    float: left;
    border: 1px solid #efefef;
  }
}

.no-info {
  padding: 100px 0;
  text-align: center;
  font-size: 30px;
  display: flex;
  flex-direction: column;

  .no-data {
    align-self: center;
  }
}

.img-item {
  display: flex;
  flex-direction: column;
}

.el-pagination {
  align-self: flex-end;
  margin: 3vw 10vw 2vw;
}

.section {
  padding-top: 8vw;
  margin-bottom: -5vw;
  width: 1218px;
  align-self: center;
}
</style>
